<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <!-- ele 的引入放在vue下面-->
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <script src = 'plug-in/jquery-2.2.0.min.js' type='text/javascript'></script>
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
    <link rel="stylesheet" href="css/myhistroy.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/common.js"></script>

</head>

<body>
<div id="app">
    <common @logined="logined"></common>
    <div class="history-container">
        <!-- 左侧操作栏 -->
        <div class="left-sidebar">
            <el-menu default-active="all" class="el-menu-vertical">
                <el-menu-item index="all" @click="getVideoPlayHistory">
                    <i class="el-icon-menu"></i>
                    <span slot="title">全部历史</span>
                </el-menu-item>
                <el-menu-item index="today" @click="getVideoPlayHistoryToday">
                    <i class="el-icon-time"></i>
                    <span slot="title">今天观看</span>
                </el-menu-item>
                <el-menu-item index="yesterday" @click="getVideoPlayHistoryYesterday">
                    <i class="el-icon-time"></i>
                    <span slot="title" >昨天观看</span>
                </el-menu-item>
                <el-menu-item index="7days" @click="getVideoPlayHistory7days">
                    <i class="el-icon-date"></i>
                    <span slot="title">7天内</span>
                </el-menu-item>
                <el-menu-item index="30days" @click="getVideoPlayHistory30days">
                    <i class="el-icon-date"></i>
                    <span slot="title">30天内</span>
                </el-menu-item>
            </el-menu>

            <div style="margin-top: 20px;">
                <el-button type="text" @click="clearAllHistory" icon="el-icon-delete">清空历史记录</el-button>
            </div>

            <div style="margin-top: 20px; color: #999; font-size: 12px;">
                <p>历史记录保留180天</p>
                <p>仅自己可见</p>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="history-content">
            <div class="filter-tabs">
                <div class="filter-tab active">综合</div>
                <div class="filter-tab">视频</div>
<!--                <div class="filter-tab">直播</div>-->
<!--                <div class="filter-tab">专栏</div>-->
<!--                <div class="filter-tab">更多筛选</div>-->
            </div>

            <div class="search-bar">
                <el-input class="search-input" placeholder="搜索标题/up主昵称" prefix-icon="el-icon-search" @keydown.enter.native="searchVideo" v-model="searchQuery">
                </el-input>
<!--                <span class="clear-history" @click="clearAllHistory">清空历史</span>-->
                <template v-if="!batchMode">
                    <span class="batch-manage" @click="enterBatchMode">批量管理</span>
                </template>
                <template v-else>
                    <span class="delete-btn"  @click="confirmDelete">删除</span>
                    <span class="cancel-batch" @click="exitBatchMode">取消</span>
                </template>
            </div>

            <div class="history-date">{{timeWord}}</div>

            <div class="history-list">
                <!-- 历史记录项 -->
                <div class="history-item" v-for="item in historyList" :key="item.vphid">
                    <div class="video-cover">
                        <div class="video-checkbox"
                             v-if="batchMode"
                             :class="{checked: selectedItems.includes(item.vphid)}"
                             @click="toggleSelect(item.vphid)"></div>
                        <img :src="item.image" alt="视频封面" @click="location.href = 'video.html?id=' + item.id">
                        <div class="progress-bar">
                            <div class="progress" :style="{width: (item.endtime/item.videoLength) * 100+ '%'}"></div>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">{{ item.vname }}</div>
                        <div class="video-up">{{ item.name }}</div>
                        <div class="video-time">{{ item.time.replace("T", " ") }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            searchQuery: '',
            historyList: [],
            myinfo : {},
            searchQuery: '',
            batchMode: false,
            selectedItems: [],
            timeWord: "全部",
        },
        created() {
            this.getVideoPlayHistory();
        },
        methods : {
            logined(myinfo) {
                this.myinfo = myinfo;
            },
            getVideoPlayHistory() {
               axios.get("videoplayhistroy/getVideoPlayHistory"+location.search).then(res=>{
                   if( res.data.code == 1){
                       this.historyList = res.data.data;
                       this.timeWord = "全部";
                   }
               })
            },
            enterBatchMode() {
                this.batchMode = true;
                this.selectedItems = [];
            },

            exitBatchMode() {
                this.batchMode = false;
                this.selectedItems = [];
            },

            toggleSelect(id) {
                if (!this.batchMode) return;

                const index = this.selectedItems.indexOf(id);
                if (index === -1) {
                    this.selectedItems.push(id);
                } else {
                    this.selectedItems.splice(index, 1);
                }
            },

            confirmDelete() {
                if (this.selectedItems.length === 0) {
                    this.$message.warning('请先选择要删除的视频');
                    return;
                }

                this.$confirm(`确定要删除选中的 ${this.selectedItems.length} 条历史记录吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteSelectedItems();
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },

            deleteSelectedItems() {
                axios.post("videoplayhistroy/deleteVideoPlayHistory", this.selectedItems).then(res=>{
                    if( res.data.code == 1){
                        this.historyList = this.historyList.filter(
                            item => !this.selectedItems.includes(item.vphid)
                        );
                        this.$message.success('删除成功');
                        this.selectedItems = [];
                        this.batchMode = false;
                    }
                })
            },
            clearAllHistory() {
                this.$confirm('确定要清空所有历史记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios.post("videoplayhistroy/deleteAllVideoPlayHistory?id="+this.myinfo.id).then(res=>{
                        if( res.data.code == 1){
                            this.historyList = [];
                            this.$message.success('已清空历史记录');
                        }
                    })

                }).catch(() => {
                    this.$message.info('已取消清空');
                });
            },
            getVideoPlayHistoryToday() {
                axios.get("videoplayhistroy/getVideoPlayHistoryByTime",{
                    params : {
                        uid : this.myinfo.id,
                        startTime : new Date().toISOString().split('T')[0] + 'T00:00:00',
                        endTime : new Date().toISOString().split('T')[0] + 'T23:59:59'
                    }
                }).then(res=>{
                    if( res.data.code == 1){
                        this.historyList = res.data.data;
                        this.timeWord = "今天";
                    }
                })
            },
            getVideoPlayHistoryYesterday(){
                axios.get("videoplayhistroy/getVideoPlayHistoryByTime", {
                    params: {
                        uid: this.myinfo.id,
                        startTime: new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0] + 'T00:00:00',
                        endTime: new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0] + 'T23:59:59'
                    }
                }).then(res=>{
                    if( res.data.code == 1){
                        this.historyList = res.data.data;
                        this.timeWord = "昨天";
                    }
                })
            },
            getVideoPlayHistory7days(){
                axios.get("videoplayhistroy/getVideoPlayHistoryByTime", {
                    params: {
                        uid: this.myinfo.id,
                        startTime: new Date(new Date().setDate(new Date().getDate() - 6)).toISOString().split('T')[0] + 'T00:00:00',
                        endTime: new Date(new Date().setDate(new Date().getDate())).toISOString().split('T')[0] + 'T23:59:59'
                    }
                }).then(res=>{
                    if( res.data.code == 1){
                        this.historyList = res.data.data;
                        this.timeWord = "7天内";
                    }
                })
            },
            getVideoPlayHistory30days(){
                axios.get("videoplayhistroy/getVideoPlayHistoryByTime", {
                    params: {
                        uid: this.myinfo.id,
                        startTime: new Date(new Date().setDate(new Date().getDate() - 29)).toISOString().split('T')[0] + 'T00:00:00',
                        endTime: new Date(new Date().setDate(new Date().getDate())).toISOString().split('T')[0] + 'T23:59:59'
                    }
                }).then(res=>{
                    if( res.data.code == 1){
                        this.historyList = res.data.data;
                        this.timeWord = "30天内";
                    }
                })
            },
            searchVideo() {
                console.log(123124123)
                if (!this.searchQuery.trim()) {
                    this.$message.warning('请输入搜索内容');
                    return;
                }
                axios.get("videoplayhistroy/getVideoPlayHistoryByText", {
                    params:{
                        id : this.myinfo.id,
                        text : this.searchQuery
                    }
                }).then(res=>{
                    if( res.data.code == 1){
                        this.historyList = res.data.data;
                        this.timeWord = "搜索结果";
                    }
                })
            }
        }
    })
</script>
</body>
</html>